<!DOCTYPE html>
<html>
<head>
	<title>three.js webgl</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
		margin: 0;
		overflow: hidden;
		background-color: #ccc;
		color: #000;
	}
	a {
		color: #f00;
	}
	</style>
</head>
<body>
<script type="importmap">
{
	"imports": {
		"three": "./js/threejs/three.module.js",
		"three/addons/": "./js/threejs/jsm/"
	}
}
</script>
<script type="module">
import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
let camera,controls, scene, renderer, stats;
//创建场景对象Scene
scene = new THREE.Scene();

//创建相机对象
var wWidth = window.innerWidth;
var wHeight= window.innerHeight;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, wWidth/wHeight, 0.1, 1000 );
//创建渲染器对象
//创建渲染器对象(渲染要等所有东西都加进去再渲染场景，创建和3D模型和光源没有先后顺序)s
renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸(设置的是整个屏幕的长度和宽度
renderer.setSize( wWidth, wHeight);
renderer.shadowMap.enabled = true
//body元素中插入canvas对象，也可以在页面中添加div，并加上id，通过id指定在某个div中渲染
document.body.appendChild( renderer.domElement );

//创建一个立方体几何对象Geometry
const geometry = new THREE.BoxGeometry(8, 8, 8 );
//给几何体创建材质，这里是改为蓝色，材质对象Material
const material = new THREE.MeshLambertMaterial( { color: 0xff2288 } );
//网格模型对象Mesh
const cube = new THREE.Mesh( geometry, material );
cube.castShadow = true;
//网格模型添加到场景中，每个模型最终都要添加到场景中才会被渲染
scene.add( cube );

var axes = new THREE.AxesHelper(50);
scene.add(axes)


camera.position.x = -30;
camera.position.y = 45;
camera.position.z = 35;
camera.lookAt(scene.position);


cube.position.x = 4;
cube.position.y = 10;
cube.position.z = 20;

var	AXIS_LENGTH = 1
// follows right-hand coordinate system
var	AXIS_COLOR_X = 0xff0000 // red
var	AXIS_COLOR_Y = 0x00ff00 // green
var	AXIS_COLOR_Z = 0x0000ff // blue

const origin = new THREE.Vector3(0, 0, 0)
const axisX = new THREE.Vector3(1, 0, 0)
const axisY = new THREE.Vector3(0, 1, 0)
const axisZ = new THREE.Vector3(0, 0, 1)

const arrowX = new THREE.ArrowHelper(axisX, origin, AXIS_LENGTH, AXIS_COLOR_X, AXIS_LENGTH / 5, AXIS_LENGTH / 10)
const arrowY = new THREE.ArrowHelper(axisY, origin, AXIS_LENGTH, AXIS_COLOR_Y, AXIS_LENGTH / 5, AXIS_LENGTH / 10)
const arrowZ = new THREE.ArrowHelper(axisZ, origin, AXIS_LENGTH, AXIS_COLOR_Z, AXIS_LENGTH / 5, AXIS_LENGTH / 10)
scene.add(arrowX, arrowY, arrowZ)

// cube.rotation.x += 0.5;
// cube.rotation.y += 0.5;

var planeGeometry = new THREE.PlaneGeometry(400,800,4,8);
var planeMaterial = new THREE.MeshLambertMaterial( { color: 0x5F9EA0 } );
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.side = THREE.DoubleSide;
plane.wireframe  = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15,0,0);
plane.receiveShadow = true
scene.add(plane)

//Ambient光源
var ambientLight = new THREE.AmbientLight(0xff0000);
scene.add(ambientLight)

//聚光灯光源
var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(-60,40,-65);
spotLight.castShow = true;
spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
spotLight.shadow.camera.far = 130;
spotLight.shadow.camera.near = 40;
scene.add(spotLight)

stats = createStats();
render();

var gap = 0;
//循环渲染
function render() {
	if(null!=stats){
		stats.update();
	}
	// cube.rotation.x += 0.02
	// cube.rotation.y += 0.02
	// cube.rotation.z += 0.02

	// gap += 0.01;
	// cube.position.x = 25 + (20*(Math.sin(gap)))
	// cube.position.y = 6 + (20*Math.abs(Math.cos(gap)))

	scene.traverse(function(obj){
		if(null!=obj && typeof(obj)!='undefined' && (obj instanceof THREE.Mesh &&  obj!= plane )){
			obj.rotation.x += 0.02
			obj.rotation.y += 0.02
			obj.rotation.z += 0.02
		}
		
	})

	//执行渲染操作   指定场景、相机作为参数
	renderer.render(scene, camera);
	// 使用 requestAnimationFrame 函数安排下一次渲染
	requestAnimationFrame(render);
	//修改正方体网格的x轴旋转角度
}
function createStats(){
	var stats = new Stats();
	stats.domElement.style.position = 'absolute'
	stats.domElement.style.lett = '0px'
	stats.domElement.style.top = '0px'
	stats.setMode(0);

	var hStats = document.getElementById('stats');
	if(null!=hStats){
		hStats.appendChild(stats.domElement);
	}
	return stats;
}

window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}

function removeObject(hScene,obj){
	if(null==hScene || typeof(hScene)=='undefined'){
		return
	}
	if(null==obj || typeof(obj)=='undefined'){
		return
	}
	if(obj instanceof Mess){
		hScene.remove(obj);
	}
}
</script>
</body>
</html>
